<template>
	<div class="commentItem">
		<contentItems
			v-if="comment.parent"
			:comment="comment.parent"
			@reply="replyFn"
		></contentItems>
		<div class="top">
			<div class="left">
				<span>{{ comment.user.nickname }}</span>
				&nbsp;&nbsp;&nbsp;
				<span>2分钟前</span>
			</div>
			<van-button type="primary" size="small" @click="replyFn(comment)">回复</van-button>
		</div>
		<div class="bottom">{{ comment.content }}</div>
	</div>
</template>

<script>
export default {
	name: 'contentItems',
	props: {
		// 当前需要渲染的评论数据对象
		comment: {
			type: Object
		}
	},
	methods: {
		replyFn(item) {
			// console.log(item);
			this.$emit('reply', item);
		}
	}
};
</script>

<style lang="less" scoped>
.commentItem {
	background-color: #f1f1f1;
	border: 1px solid #ccc;
	padding: 5px;
	margin-top: 10px;
	.top {
		font-size: 12px;
		color: #aaa;
		display: flex;
		justify-content: space-between;
	}
	.bottom {
		font-size: 13px;
		line-height: 40px;
	}
}
</style>
